<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="Stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
<link rel="Stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/index.css" />
<link rel="Stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/style.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<style>
#body {
	height: 500px;
	width: 40%;
	padding: 0;
	margin: 0;
	background: -moz-linear-gradient(-45deg, #183850 0, #183850 25%, #192c46 50%,
		#22254c 75%, #22254c 100%);
	background: -webkit-linear-gradient(-45deg, #183850 0, #183850 25%, #192c46 50%,
		#22254c 75%, #22254c 100%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	display:none;
	position:absolute;
	top:20%;
	left:0;
}

.but123 {
	width: 20%;
	height: 55px;
	margin-left: 20%;
	background: black;
	color: white;
	border: none;
}

.lianxiren {
	height: auto;
	width: 15%;
	float: left;
}

.lianxiren a {
	color: black;
	text-decoration: none;
}

.lianxiren a:hover {
	color: white;
}

.lianxiren1:hover {
	background: skyblue;
}

.lianxiren1 {
	height: 50px;
	width: 100%;
	background: purple;
	line-height: 50px;
	text-align: center;
	margin-top:5px;
}

.liantian {
	height: auto;
	width: 85%;
	float: right;
}

.wenben {
	margin-left: 30%;
	resize: none;
	height: 50px;
	width: 80%;
}

.wenbenyu {
	width: 60%;
	height: auto;
	float: left;
}

.fasongnaniu {
	height: auto;
	width: 40%;
	float: right;
}
.close1{width:80%;}
.fasong {
	height: 80px;
	width: 100%;
}

.mingc {
	height: 50px;
	width: 100%;
	color: white;
	line-height: 50px;
	margin-left: 5px;
}
.left{
animation: show-chat-even 0.15s 1 ease-in;
-moz-animation: show-chat-even 0.15s 1 ease-in;
-webkit-animation: show-chat-even 0.15s 1 ease-in;
float: left;
margin-left:20px;
color: #0EC879;
}
.right{
animation: show-chat-odd 0.15s 1 ease-in;
-moz-animation: show-chat-odd 0.15s 1 ease-in;
-webkit-animation: show-chat-odd 0.15s 1 ease-in;
float: right;
color: #0AD5C1;
}
</style>
</head>
<body>
	<div class="zuo">
		<div class="guanggao1">
			<img src="img/37.jpg" />
		</div>
		<div class="taitou">
			<div class="logo">
				<img src="img/logo.png" />
			</div>
			<div class="sousuo">
				<form action="${pageContext.request.contextPath}/house-list">
					<input class="sousuokuang" type="text" name="title" id="title"
						placeholder="请输入街道或者小区..." /> <input class="sousuoanniu"
						type="submit" value="GO" />
				</form>
			</div>
			<div class="denglu dropdown" style="text-align: left;">
				<c:if test="${user==null}">
					<a href="login">登录 </a>
					<a href="register"> 注册 </a>
				</c:if>
				<c:if test="${user!=null}">
					<a id="dLabel" data-target="#" href="javascript:;"
						data-toggle="dropdown" role="button" aria-haspopup="true"
						aria-expanded="false" style="text-decoration: none;"> <img
					 id="tubiao" src="img/user.jpg" width="50px" height="50px" />
					</a>
					<ul class="dropdown-menu" aria-labelledby="dLabel">
						<li><a href="user/list" style="line-height: 35px;">个人主页</a></li>
						<li><a href="javascript:;" id="message" style="line-height: 35px;">他人留言</a></li>
						<c:if test="${user.username=='admin'}">
							<li><a  href="admin/list" style="line-height: 35px;">后台管理</a></li>
						</c:if>
						<li><a href="userRemove" style="line-height: 35px;">退出</a></li>
					</ul>
				</c:if>
			</div>
		</div>
		<div class="lanmu">
			<div class="kong"></div>
			<div class="neirong">
				<a href="index">
					<li>首页</li>
				</a> <a href="#">
					<li>新房</li>
				</a> <a href="#">
					<li>二手房</li>
				</a> <a href="house-list">
					<li>租房</li>
				</a> <a href="#">
					<li>商铺写字楼</li>
				</a> <a href="#">
					<li>海外地产</li>
				</a> <a href="#">
					<li>楼讯</li>
				</a> <a href="#">
					<li>房产研究院</li>
				</a> <a href="#">
					<li>房价</li>
				</a> <a href="#">
					<li>问答</li>
				</a>
			</div>
		</div>

		<div class="loupan">
			<div class="biaoti">
				<a href="#"> 热门楼盘> </a>
			</div>
			<div class="jieshao">
				<c:forEach items="${house}" var="house">
					<div class="loupan1">
						<img
							src="${pageContext.request.contextPath}/images/${house.photo.filename}" />
						<p class="loupanming">
							<a href="${pageContext.request.contextPath}/house?id=${house.id}">${house.topic}</a>
						</p>
						<br />
						<p class="jiage">${house.content}</p>
						<br />
						<h1>${house.photo.title}</h1>
					</div>
				</c:forEach>
				<div class="loupan2">
					<c:forEach items="${houses}" var="house">
						<div class="loupan3">
							<img
								src="${pageContext.request.contextPath}/images/${house.photo.filename}" />
							<p class="loupanming">
								<a
									href="${pageContext.request.contextPath}/house?id=${house.id}">${house.topic}
								</a>
							</p>
							<br />
							<p class="jiage">
								<c:if test="${fn:length(house.content)>15}">
                        		${fn:substring(house.content,0,15)}...
                        	</c:if>
								<c:if test="${fn:length(house.content)<15}">
                        		${house.content}
                        	</c:if>
							</p>
							<br />
							<h3>${house.photo.title}</h3>
						</div>
					</c:forEach>
				</div>
			</div>
		</div>


		<div class="guanggao">
			<div class="guanggaozuo">
				<img src="img/45.jpg" />
			</div>
			<div class="guanggaoyou">
				<img src="img/41.jpg" />
			</div>
		</div>
		<div class="zhuizong">
			<div class="biaoti">
				<div class="yi">
					<a href="#"> 热点追踪> </a>
				</div>
				<div class="er">
					<a href="#"> 实地探盘> </a>
				</div>
				<div class="san">
					<a href="#"> 新房动态> </a>
				</div>
			</div>
			<div class="jieshao">
				<div class="one">
					<c:forEach items="${priceHouse}" var="house" varStatus="h">
						<c:if test="${h.index==0}">
							<div class="shang">
								<div class="aa">
									<img
										src="${pageContext.request.contextPath}/images/${house.photo.filename}" />
								</div>
								<div class="bb">
									<a
										href="${pageContext.request.contextPath}/house?id=${house.id}">
										<h3>${house.topic}</h3>
									</a> <br />
									<p>
										<c:if test="${fn:length(house.content)>15}">
			                        		${fn:substring(house.content,0,15)}...
			                        	</c:if>
										<c:if test="${fn:length(house.content)<15}">
			                        		${house.content}
			                        	</c:if>
									</p>
								</div>
							</div>
						</c:if>
						<c:if test="${h.index==1}">
							<div class="zhong">
								<div class="aa">
									<img
										src="${pageContext.request.contextPath}/images/${house.photo.filename}" />
								</div>
								<div class="bb">
									<a
										href="${pageContext.request.contextPath}/house?id=${house.id}">
										<h3>${house.topic}</h3>
									</a> <br />
									<p>
										<c:if test="${fn:length(house.content)>20}">
			                        		${fn:substring(house.content,0,15)}...
			                        	</c:if>
										<c:if test="${fn:length(house.content)<20}">
			                        		${house.content}
			                        	</c:if>
									</p>
								</div>
							</div>
						</c:if>
						<c:if test="${h.index==2}">
							<div class="xia">
								<div class="aa">
									<img
										src="${pageContext.request.contextPath}/images/${house.photo.filename}" />
								</div>
								<div class="bb">
									<a
										href="${pageContext.request.contextPath}/house?id=${house.id}">
										<h3>${house.topic}</h3>
									</a> <br />
									<p>
										<c:if test="${fn:length(house.content)>15}">
			                        		${fn:substring(house.content,0,15)}...
			                        	</c:if>
										<c:if test="${fn:length(house.content)<15}">
			                        		${house.content}
			                        	</c:if>
									</p>
								</div>
							</div>
						</c:if>
					</c:forEach>
				</div>
				<div class="two">
					<c:forEach items="${list3}" var="house" varStatus="h">
						<c:if test="${h.index==0}">
							<div class="cc">
								<img
									src="${pageContext.request.contextPath}/images/${house.photo.filename}" />
								<p>
									<a
										href="${pageContext.request.contextPath}/house?id=${house.id}">${house.topic}</a>
								</p>
							</div>
						</c:if>
						<c:if test="${h.index==1}">
							<div class="dd">
								<img
									src="${pageContext.request.contextPath}/images/${house.photo.filename}" />
								<p>
									<a
										href="${pageContext.request.contextPath}/house?id=${house.id}">${house.topic}</a>
								</p>
							</div>
						</c:if>
					</c:forEach>
				</div>
				<div class="three">
					<c:forEach items="${list4}" var="house" varStatus="h">
						<c:if test="${h.index==0}">
							<li type="1" style="color: red; font-weight: bold;"><a
								href="${pageContext.request.contextPath}/house?id=${house.id}"
								style="color: red;"> <c:if
										test="${fn:length(house.topic)>=15}">
				                       ${fn:substring(house.topic,0,15)}...
				                </c:if> <c:if test="${fn:length(house.topic)<15}">
				                        ${house.topic}
				                </c:if>
							</a></li>
						</c:if>
						<c:if test="${h.index==1}">
							<li type="1" style="color: #4DFF00; font-weight: bold;"><a
								href="${pageContext.request.contextPath}/house?id=${house.id}"
								style="color: #4DFF00;"> <c:if
										test="${fn:length(house.topic)>=15}">
				                       ${fn:substring(house.topic,0,15)}...
				                </c:if> <c:if test="${fn:length(house.topic)<15}">
				                        ${house.topic}
				                </c:if>
							</a></li>
						</c:if>
						<c:if test="${h.index==2}">
							<li type="1" style="color: #0000FF; font-weight: bold;"><a
								href="${pageContext.request.contextPath}/house?id=${house.id}"
								style="color: #0000FF;"> <c:if
										test="${fn:length(house.topic)>=15}">
				                       ${fn:substring(house.topic,0,15)}...
				                </c:if> <c:if test="${fn:length(house.topic)<15}">
				                        ${house.topic}
				                </c:if>
							</a></li>
						</c:if>
						<c:if test="${h.index>2}">
							<li type="1" style="color: gray;"><a
								href="${pageContext.request.contextPath}/house?id=${house.id}"
								style="color: gray;"> <c:if
										test="${fn:length(house.topic)>=15}">
				                       ${fn:substring(house.topic,0,15)}...
				                </c:if> <c:if test="${fn:length(house.topic)<15}">
				                        ${house.topic}
				                </c:if>
							</a></li>
						</c:if>
					</c:forEach>

				</div>
			</div>
		</div>
		<div class="yewei">
			<div class="tou">
				<hr />
				<br /> <a href="#"> 爱上城 </a> | | <a href="#"> 58车 </a>

			</div>
			<div class="shen">
				<br /> <a href="#"> 客户服务中心 </a> 违法信息举报： 4006209008 <a href="#">
					yinsibaohu@58.com </a> Copyright © 2007-2019 www.anjuke.com All Rights
				Reserved <a href="#"> ICP号：沪 B2-20090008 </a>
			</div>
			<div class="baozheng">
				<a href="#"> <img src="img/警察.png" />沪公网安备 31011502002124号
				</a>
			</div>
			<div class="wei">
				<br /> <a href="#"> <img src="img/51.png" />
				</a> <a href="#"> <img src="img/52.png" />
				</a> <a href="#"> <img src="img/50.png" />
				</a> <a href="#"> <img src="img/47.png" />
				</a>
			</div>
		</div>

	</div>
	<div class="you">
		<div class="xilie">

			<div class="kefu">
				<a href="#">
					<div class="oo1">
						<img src="img/57.png" />
					</div>
					<div class="pp">客服</div>
				</a>
			</div>
			<div class="zufang">
				<a href="#">
					<div class="oo">
						<img src="img/58.png" />
					</div>
					<div class="ii">租房</div>
				</a>
			</div>
		</div>
	</div>

	<!-- 留言详情 -->
	<div id="body" style="height:580px;">
		<div class="lianxiren">
			<div class="mingc">联系人：</div>
			<c:forEach items="${messages}" var="message">
				<a href="javascript:;" data="${message.toUser.id}" class="btn-touser">
				<div class="lianxiren1">
					<span>${message.toUser.name}</span>
				</div>
			</a>
			</c:forEach>
		</div>
		<div class="liantian">
			<div id="convo" data-from="Sonu Joshi">
			<h2 style="margin-left:40%;"></h2>
				<div class="chat-thread">
				</div>
			</div>
			<br /> <br />
			<div class="fasong">
				<div class="wenbenyu">
					<textarea class="wenben" id="content-info"></textarea>
				</div>
				<div class="fasongnaniu">
					<input type="button" value="发送" class="but123" id="btn-content"/>
				</div>
				
			</div>
			<div class="close1">
					<input type="button" value="关闭" class="but123" id="btn-close" />
			</div>
			<input type="hidden" value="${user.id}" id="touserid" />
			<input type="hidden" value="" id="fromUserid"/>;
			<input type="hidden" value="${pageContext.request.contextPath}" id="path"/>
</body>
<script>
	$(function() {

		
		
		$("form").submit(function() {
			$("form input").trigger("blur");
			var title = $("#title").val();
			if (title == '') {
				return false;
			}
		})
		
		$("#message").click(function(){
			$("#body").show().css("z-index","2");
			fun();
		})
		
		$("#btn-close").click(function(){
			$("#body").hide();
		})
		
		$("#body").on("click",".btn-touser",function(){
			var fromUserid = $(this).attr("data");
			var toUserid = $("#touserid").val();
			$("#fromUserid").val(fromUserid);
			load(fromUserid,toUserid);
		})
		
		$("#btn-content").click(function(){
			var fromUserid = $("#fromUserid").val();
			var toUserid = $("#touserid").val();
			var content = $("#content-info").val();
			if(fromUserid==''){
				alert('请选择联系人');
			}else if(content==''){
				alert('请输入内容');
			}else{
				var json = {
						"fromUser" :{id:fromUserid},
						"toUser" : {id:toUserid},
						"content" : content
					}
				$.ajax({
					type:"post", // get或者post
					url : $("#path").val()+"/addMessage", // 请求的url地址						
					data:JSON.stringify(json),
					contentType:"application/json",
					dataType : "text", //json写了jq会帮我们转换成数组或者对象
					success : function(){
						$("#content-info").val('');
						load(fromUserid,toUserid);
					}
				  })
			}
		})
	})
	
	function load(fromUserid,toUserid){
		$.getJSON("getMessages",{"id":toUserid},function(data){
			var html = "";
			$.each(data,function(i,item){
				if(item.fromUser.id==fromUserid){
					html="<h3 style='margin-left:40%;color:white;'>"+item.fromUser.name+"</h3>";
				}
			})
			html+="<div class='chat-thread'>";
			$.each(data,function(i,item){
				if(item.fromUser.id==fromUserid && item.toUser.id==toUserid){
					if(item.toUser.id==toUserid){
						html+="<li class='right'>"+item.content+"</li>";
					}else{
						html+="<li class='left'>"+item.content+"</li>";
					}
				}else if(item.fromUser.id==toUserid && item.toUser.id==fromUserid){
					if(item.fromUser.id==toUserid)
						html+="<li class='left'>"+item.content+"</li>";
				}
			})
			html+="</div>";
			$("#convo").html(html);
			fun();
		})
	}
	
	/*未读消息获取*/
$(function(){
	$("#tubiao").on("click",function(){
			var num=0;
		$.get("xiaoxi",{"fromUserId":$("#fromUserId").val()}, function(data){
			  
			  $.each(data,function(i,item){
				 if(item["isRead"]==false){
					 num++;	
				 }	
			});	
				 if(num>0){ 				
					 var html= "<a href='javascript:;' id='message' style='line-height: 35px;'>他人留言(未读"+num+")</a>";
					 $("#message").html(html);
				 }
						
		})
	 });	
});

		function fun(){
	     document.getElementsByClassName("chat-thread")[0].scrollTop=document.getElementsByClassName("chat-thread")[0].scrollHeight;
		}

</script>
</html>